import React, { useState } from "react"
function Header(props){
  console.log(props)
  const fn = () => {
    console.log(props)
    // 这句话就是子向父通信的核心操作， 子组件想要修改value数据，但是value数据是父组件的，子组件肯定不能修改
    // 想了一个办法，将父组件修改自己value数据的方法setValue，传给子组件，子组件调用父组件的方法，达到父组件自己修改自己数据的目的
    props.setValue(props.value + 1)
  }
  return (
    <>
     <h3>子组件---{props.value}</h3>
     <button onClick={fn}>子组件想要修改父组件的value数据</button>
    </>
  )
}
// // 类组件 演示 子向父通信
class Footer extends React.Component {
  constructor(){
    super()
      console.log(123)
    }
  }
  fn = () => {
    // 下面是通过调用父组件的方法，修改父组件的数据
    this.props.setValue(this.props.value - 1)
  }
  render() {
    console.log(this.props)
    return (
      <>
        <h3>类组件---{this.props.value}</h3>
        <button onClick={this.fn}>我是类组件的子组件 想要修改父组件数据</button>
        <button onClick={this.fn2}>测试另一个函数</button>
      </>
    )
  }
}
function App() {
  const [value, setValue] = useState(0)
  return (
    <>
      <h2>父组件---{value}</h2>
      <Header value={value} setValue={setValue} />
      <Footer value={value} setValue={setValue} />
    </>
  )
}
export default App